<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

get_header();
$category = get_the_category();
$current_id=$category[0]->cat_ID;
$current_root_id=tx_wp_get_category_root_id($current_id);
if($current_root_id==30 ||$current_root_id==31){
    include_once(TEMPLATEPATH . '/template-parts/page-templets/single-product.php');
} 
else {
    include_once(TEMPLATEPATH . '/template-parts/page-templets/single-default.php');
}
?>
<script>
    //点击某一个的时候进行切换图片
    //1.获取元素
    var li = document.querySelectorAll('ul.product_tab_ul li')
    console.log(li);
    var item = document.querySelectorAll('.product_tab_content .tab_item')
        //遍历Li
    for (var i = 0; i < li.length; i++) {
        //点击某一个li的时候，给某一个Li一个class属性值active,变为黄色
        //给当前的数组一个属性，属性值为下标
        li[i].index = i
        li[i].onclick = function() {
            //点击之后，将所有的点击的属性去掉
            for (var j = 0; j < li.length; j++) {
                li[j].className = ''
            }
            //给点击的那一个tab变为active
            this.className = 'active';
            //循环在点击的时候，把所有的图片消失，就是没有active属性
            for (var j = 0; j < item.length; j++) {
                item[j].className = 'tab_item'
            }
            //获取到当前点击的是哪一个，对应的Ol显示图片
            var index = this.index //获取当前元素的index属性值
            item[index].className = 'tab_item active'
        }
 
    }
</script>
<?php
get_footer();
